<template>
    <div>
        <el-card class="cantainer">
            <h3>用户信息</h3>
            <el-descriptions border>
                <el-descriptions-item label="昵称">{{
                    detail.nike
                }}</el-descriptions-item>
                <el-descriptions-item label="登录账号">{{
                    detail.loginname
                }}</el-descriptions-item>
                <el-descriptions-item label="手机号"
                    ><el-tag
                        style="cursor: pointer"
                        @click="editTelBoxShow(detail.tel)"
                        >修改</el-tag
                    >
                    &nbsp;&nbsp;&nbsp;&nbsp;{{
                        detail.tel
                    }}</el-descriptions-item
                >
                <el-descriptions-item label="收货地址"
                    ><el-tag
                        style="cursor: pointer"
                        @click="editAddressBoxShow(detail.address)"
                        >修改</el-tag
                    >
                    &nbsp;&nbsp;&nbsp;&nbsp;{{
                        detail.address
                    }}</el-descriptions-item
                >
            </el-descriptions>
            <el-collapse
                @change="showdata(activepage)"
                v-model="activepage"
                accordion
            >
                <el-collapse-item title="我的订单" name="1">
                    <el-card>
                        <el-table
                            :data="orderlist"
                            height="500"
                            border
                            style="width: 100%; margin-top: 15px"
                        >
                            <el-table-column type="index" label="#">
                            </el-table-column>
                            <el-table-column
                                prop="ordernum"
                                label="订单号"
                                width="90"
                            ></el-table-column>
                            <el-table-column
                                prop="usernike"
                                label="下单用户"
                            ></el-table-column>
                            <el-table-column
                                prop="goods"
                                label="商品"
                            ></el-table-column>
                            <el-table-column
                                prop="busnike"
                                label="所属商家"
                            ></el-table-column>
                            <el-table-column
                                prop="total"
                                label="总价"
                            ></el-table-column>
                            <el-table-column
                                prop="createtime"
                                label="下单时间"
                            ></el-table-column>
                            <el-table-column
                                prop="ishot"
                                label="状态"
                                width="90"
                            >
                                <template slot-scope="scope">
                                    <el-tag
                                        v-if="scope.row.issend == '1'"
                                        type="success"
                                    >
                                        已发货
                                    </el-tag>
                                    <el-tag v-else> 未发货 </el-tag>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                </el-collapse-item>
                <el-collapse-item title="我的购物车" name="2">
                    <el-card>
                        <el-table
                            :data="cartdata"
                            style="width: 100%; height: 200px; overflow: auto"
                        >
                            <el-table-column type="index" label="#">
                            </el-table-column>
                            <el-table-column prop="goodname" label="商品名称">
                            </el-table-column>
                            <el-table-column label="商品数量">
                                <template slot-scope="scope">
                                    <el-button
                                        type="primary"
                                        size="mini"
                                        @click="
                                            reducecart(
                                                scope.row.id,
                                                scope.row.num
                                            )
                                        "
                                        >-1</el-button
                                    >
                                    <el-tag type="info" style="margin: 10px">{{
                                        scope.row.num
                                    }}</el-tag>
                                    <el-button
                                        type="primary"
                                        size="mini"
                                        @click="
                                            addcart(scope.row.id, scope.row.num)
                                        "
                                        >+1</el-button
                                    >
                                </template>
                            </el-table-column>
                        </el-table>
                        <div style="margin: 10px; float: right">
                            <h3>
                                所有价格为
                                <span style="font-size: 30px; color: bluesky">{{
                                    price
                                }}</span>
                                元
                            </h3>
                            <el-button @click="createorder()"
                                >立即支付</el-button
                            >
                        </div>
                    </el-card>
                </el-collapse-item>
            </el-collapse>
        </el-card>
        <el-dialog
            v-loading="loadingStatus"
            title="二维码支付"
            :visible.sync="payBoxVisible"
            width="30%"
            @close="payBoxVisibleClosed"
        >
            <qrcode-vue value="模拟支付成功" size="250" level="H" />
            <el-button type="primary" style="margin-top: 10px" @click="payOK"
                >支付成功</el-button
            >
        </el-dialog>
        <el-dialog
            v-loading="loadingStatus"
            title="修改地址"
            :visible.sync="editBoxvisible"
            width="30%"
        >
            <el-input placeholder="请输入新地址" v-model="newAddress">
                <template slot="prepend">新地址:</template>
            </el-input>
            <el-button
                type="primary"
                style="margin-top: 10px"
                @click="editAddress"
                >提交</el-button
            >
        </el-dialog>
        <el-dialog
            v-loading="loadingStatus"
            title="修改电话"
            :visible.sync="editTelBoxVisible"
            width="30%"
        >
            <el-input placeholder="请输入新电话" v-model="newTel">
                <template slot="prepend">新电话:</template>
            </el-input>
            <el-button
                type="primary"
                style="margin-top: 10px"
                @click="editTel"
                >提交</el-button
            >
        </el-dialog>
    </div>
</template>


<script>
import QrcodeVue from 'qrcode.vue';
export default {
    data() {
        return {
            newAddress: '',
            newTel: '',
            editTelBoxVisible: false,
            editBoxvisible: false,
            loadingStatus: false,
            payBoxVisible: false,
            orderlist: [],
            detail: {},
            activepage: 0,
            cartdata: [],
            newnum: 0,
            price: 0,
        };
    },
    created() {
        this.checklogin();
        this.getuserdata();
    },
    mounted() {},
    components: {
        QrcodeVue,
    },
    methods: {
        editAddressBoxShow(address) {
            this.editBoxvisible = true;
            this.newAddress = address;
        },
        // 更新地址方法
        editAddress() {
            if (this.newAddress == '') {
                this.$Message.error('新地址不能为空');
                return;
            }
            this.loadingStatus = true;
            var id = window.sessionStorage.getItem('userid');
            var address = this.newAddress;
            var params = new URLSearchParams();
            params.append('id', id);
            params.append('address', address);
            this.$http
                .post('updateUserAddress', params)
                .then((res) => {
                    this.loadingStatus = false;
                    if (res.data.code !== 200) {
                        this.$Message({
                            message: '修改失败',
                            type: 'error',
                        });
                        return;
                    }
                    this.getuserdata();
                    this.editBoxvisible = false;
                    this.$Message({
                        message: '修改成功',
                        type: 'success',
                    });
                })
                .catch((err) => {
                    this.loadingStatus = false;
                    this.$Message.error('系统错误' + err);
                });
        },
        editTelBoxShow(tel) {
            this.editTelBoxVisible = true;
            this.newTel = tel;
        },
        // 修改电话方法
        editTel() {
            if (this.newTel == '') {
                this.$Message.error('新电话不能为空');
                return;
            }
            // 正则验证电话号码
            var reg = /^1[3|4|5|7|8][0-9]{9}$/;
            if (!reg.test(this.newTel)) {
                this.$Message.error('电话号码格式不正确');
                return;
            }
            this.loadingStatus = true;
            var id = window.sessionStorage.getItem('userid');
            var tel = this.newTel;
            var params = new URLSearchParams();
            params.append('id', id);
            params.append('tel', tel);
            this.$http
                .post('updateUserTel', params)
                .then((res) => {
                    this.loadingStatus = false;
                    if (res.data.code !== 200) {
                        this.$Message({
                            message: '修改失败',
                            type: 'error',
                        });
                        return;
                    }
                    this.getuserdata();
                    this.editTelBoxVisible = false;
                    this.$Message({
                        message: '修改成功',
                        type: 'success',
                    });
                })
                .catch((err) => {
                    this.loadingStatus = false;
                    this.$Message.error('系统错误' + err);
                });
        },
        payBoxVisibleClosed() {
            this.payBoxVisible = false;
        },
        checklogin() {
            if (this.$cookie.get('login') !== '1') {
                this.$Message.error('您还没有登录！');
                window.sessionStorage.setItem('activepath', '5');
                this.$router.push('/index');
            }
        },
        getuserdata() {
            if (this.$cookie.get('login') == '1') {
                this.$http
                    .get('usergetdata', {
                        params: {
                            token: window.sessionStorage.getItem('usertoken'),
                            id: window.sessionStorage.getItem('userid'),
                        },
                    })
                    .then((res) => {
                        this.detail = res.data.data;
                    })
                    .catch((err) => {
                        this.$Message.error('系统错误' + err);
                    });
            }
        },
        getusercart() {
            this.$http
                .get('getusercart', {
                    params: {
                        token: window.sessionStorage.getItem('usertoken'),
                        userid: window.sessionStorage.getItem('userid'),
                    },
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        this.cartdata = res.data.data;
                        this.getprice();
                    } else {
                        this.$Message.error('查询购物车失败!');
                    }
                })
                .catch((err) => {
                    this.$Message.error('系统错误' + err);
                });
        },
        showdata(id) {
            // if (id == 0) {
            //   console.log("fuck");
            //   this.getorderlist();
            // } else {
            //   this.getusercart();
            // }
            if (id == 1) {
                this.getorderlist();
            }
            if (id == 2) {
                this.getusercart();
            }
        },
        addcart(id, num) {
            if (num == '10') {
                this.$Message.error('已经不能购买更多了！');
                return;
            }
            let params = new URLSearchParams();
            params.append('token', window.sessionStorage.getItem('usertoken'));
            params.append('cartid', id);
            this.$http
                .post('cartaddone', params)
                .then((res) => {
                    if (res.data.code == 200) {
                        this.$Message.success('添加成功');
                        this.getusercart();
                        this.getprice();
                    } else {
                        this.$Message.error(res.data.msg);
                    }
                })
                .catch((err) => {
                    this.$Message.error('系统错误' + err);
                });
        },
        reducecart(id, num) {
            if (num == '1') {
                this.$confirm('此操作将移除该商品, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(() => {
                        let params = new URLSearchParams();
                        params.append(
                            'token',
                            window.sessionStorage.getItem('usertoken')
                        );
                        params.append('cartid', id);
                        this.$http
                            .post('userdeletecart', params)
                            .then((res) => {
                                if (res.data.code == 200) {
                                    this.$Message.success('移除成功');
                                    this.getusercart();
                                    this.getprice();
                                } else {
                                    this.$Message.error('移除失败');
                                }
                            })
                            .catch((err) => {
                                this.$Message.error('系统错误' + err);
                            });
                    })
                    .catch(() => {
                        this.$Message({
                            type: 'info',
                            message: '已取消移除',
                        });
                    });
            } else {
                let params = new URLSearchParams();
                params.append(
                    'token',
                    window.sessionStorage.getItem('usertoken')
                );
                params.append('cartid', id);
                this.$http
                    .post('cartreduceone', params)
                    .then((res) => {
                        if (res.data.code == 200) {
                            this.$Message.success('减少成功');
                            this.getusercart();
                            this.getprice();
                        } else {
                            this.$Message.error(res.data.msg);
                        }
                    })
                    .catch((err) => {
                        this.$Message.error('系统错误' + err);
                    });
            }
        },
        getprice() {
            this.$http
                .get('getprice', {
                    params: {
                        token: window.sessionStorage.getItem('usertoken'),
                        userid: window.sessionStorage.getItem('userid'),
                    },
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        this.price = res.data.data;
                    } else {
                        this.$Message.error('计算金额失败');
                    }
                })
                .catch((err) => {
                    this.$Message.error('系统错误' + err);
                });
        },
        createorder() {
            this.$confirm('立即付款, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    if (this.price === 0) {
                        this.$Message.error('购物车为空！');
                        return;
                    }
                    // 展示二维码支付界面
                    this.payBoxVisible = true;
                })
                .catch(() => {
                    this.$Message({
                        type: 'info',
                        message: '已取消付款',
                    });
                });
        },
        getorderlist() {
            this.$http
                .get('getorderbyid', {
                    params: {
                        token: window.sessionStorage.getItem('usertoken'),
                        userid: window.sessionStorage.getItem('userid'),
                    },
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        this.orderlist = res.data.data;
                    } else {
                        this.$Message.error('查询订单失败！');
                    }
                })
                .catch((err) => {
                    this.$Message.error('系统错误' + err);
                });
        },
        payOK() {
            this.loadingStatus = true;
            setTimeout(() => {
                this.loadingStatus = false;
                let params = new URLSearchParams();
                params.append(
                    'token',
                    window.sessionStorage.getItem('usertoken')
                );
                params.append(
                    'userid',
                    window.sessionStorage.getItem('userid')
                );
                this.$http
                    .post('createorder', params)
                    .then((res) => {
                        if (res.data.code == 200) {
                            this.$Message.success('付款成功');
                            this.getusercart();
                            this.getprice();
                            this.payBoxVisible = false;
                        } else {
                            this.$Message.error('付款失败');
                        }
                    })
                    .catch((err) => {
                        this.$Message.error('系统错误！' + err);
                    });
            }, 3000);
        },
    },
};
</script>

<style scoped>
.cantainer {
    height: 600px;
    overflow: auto;
}
</style>